<template>
  <el-row :gutter="24" style="margin: 15px">
    <el-col
      :span="12"
      :xs="24"
      :sm="24"
      :md="12"
      :lg="12"
      :xl="12"
      v-motion
      :initial="{
        opacity: 0,
        y: 100,
      }"
      :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 200,
        },
      }"
    >
      <el-card shadow="hover">
        <template #header>
          <span style="font-size: 16px; font-weight: 600">个人简介</span>
        </template>
        <Table />
      </el-card>
    </el-col>
    <el-col
      :span="12"
      :xs="24"
      :sm="24"
      :md="12"
      :lg="12"
      :xl="12"
      v-motion
      :initial="{
        opacity: 0,
        y: -200,
      }"
      :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 200,
        },
      }"
    >
      <el-card shadow="hover">
        <template #header>
          <span style="font-size: 16px; font-weight: 600">插件合集</span>
        </template>
        <Scroll></Scroll>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="24" style="margin: 15px">
    <el-col
      :xs="24"
      :sm="24"
      :md="8"
      :lg="8"
      :xl="8"
      v-motion
      :initial="{
        opacity: 0,
        y: 100,
      }"
      :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 200,
        },
      }"
    >
      <el-card shadow="hover">
        <template #header>
          <span style="font-size: 16px; font-weight: 600">柱状图</span>
        </template>
        <el-skeleton animated :rows="5" :loading="loading">
          <template #default>
            <div style="height: 300px">
              <Echarts :setting="setting1" />
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="24"
      :md="8"
      :lg="8"
      :xl="8"
      v-motion
      :initial="{
        opacity: 0,
        y: -200,
      }"
      :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 200,
        },
      }"
    >
      <el-card shadow="hover">
        <template #header>
          <span style="font-size: 16px; font-weight: 600">折线图</span>
        </template>
        <el-skeleton animated :rows="5" :loading="loading">
          <template #default>
            <div style="height: 300px">
              <Echarts :setting="setting2" />
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="24"
      :md="8"
      :lg="8"
      :xl="8"
      v-motion
      :initial="{
        opacity: 0,
        y: -200,
      }"
      :enter="{
        opacity: 1,
        y: 0,
        transition: {
          delay: 200,
        },
      }"
    >
      <el-card shadow="hover">
        <template #header>
          <span style="font-size: 16px; font-weight: 600">饼图</span>
        </template>
        <el-skeleton animated :rows="5" :loading="loading">
          <template #default>
            <div style="height: 300px">
              <Echarts :setting="setting3" />
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
import { defineComponent, ref } from "vue";
import Table from "@/components/home/table.vue";
import Scroll from "@/components/home/scroll.vue";
import Echarts from "@/components/home/echarts.vue";
export default defineComponent({
  name: "page1",
  components: {
    Table,
    Scroll,
    Echarts,
  },
  setup() {
    const loading = ref(true);
    setTimeout(() => {
      loading.value = false;
    }, 1000);

    const setting1 = ref({});
    setting1.value = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    const setting2 = ref({});
    setting2.value = {
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          areaStyle: {},
        },
      ],
    };
    const setting3 = ref({});
    setting3.value = {
      title: {
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    return {
      loading,
      setting1,
      setting2,
      setting3,
    };
  },
});
</script>
